<template>
  <div>
    <div class="button-warp">
      <a-button icon="caret-right" size="small" @click="handelExecute">执行全部SQL</a-button>
      <a-button icon="play-circle" size="small"  @click="handelExecuteSelect">
        执行选中SQL
      </a-button>
      <a-button icon="delete" size="small" @click="handelClear">
        清空SQL
      </a-button>
    </div>
    <codemirror
      ref="cmRef"
      v-model="code"
      :options="cmOptions"
    />
    <vxe-grid
      class="mt-2"
      id="TableDataList"
      ref="vxeTable"
      v-bind="gridOptions"
      :toolbar-config="false"
    >
    </vxe-grid>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'

// require styles
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/abcdef.css'
// language
import 'codemirror/mode/sql/sql.js'

// 加提示的引用
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/show-hint'

import { getAction } from '@/services/manage'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
export default {
  components: {
    codemirror
  },
  mixins: [VxeTableListMixin],
  props: {
    table: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      cmOptions: {
        tabSize: 4,
        mode: 'text/x-sql',
        theme: 'abcdef',
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        // 加提示
        hintOptions: {
          completeSingle: false
        }
      },
      code: '',
      url: {
        list: '/dbconsole/data/page/',
        columnList: '/dbconsole/column/list/'
      },
      toolbarConfig: {
        import: false,
        buttons: []
      },
      proxyConfig: {
        autoLoad: false// 初始化不自动请求数据
      },
      filters: {}
    }
  },
  watch: {
    table: {
      handler(newVal) {
        if (newVal && Object.keys(newVal).length > 0) {
          const { data } = newVal
          const dbInfoId = data.dbData ? data.dbData.id : data.id
          this.url.list = '/dbconsole/data/page/' + dbInfoId
        } else {
          this.clear()
        }
      },
      immediate: true
    }
  },
  methods: {
    handelExecute() {
      if (Object.keys(this.table).length <= 0) {
        this.$message.warning('请选择数据库')
        return
      }
      this.execute = 'all'
      this.loadData()
    },
    handelClear() {
      this.code = ''
      this.clear()
    },
    handelExecuteSelect() {
      if (Object.keys(this.table).length <= 0) {
        this.$message.warning('请选择数据库')
        return
      }
      if (!this.currentSeletion) {
        this.$message.warning('请选中SQL')
        return
      }
      this.execute = 'select'
      this.loadData()
    },
    clear() {
      this.$nextTick(() => {
        this.columns = []
        this.$refs.vxeTable.reloadData([])
      })
    },
    getQueryParams() { // 获取查询条件
      var param = {
        pageNo: this.ipagination.currentPage,
        pageSize: this.ipagination.pageSize,
        sql: this.execute === 'all' ? this.code : this.currentSeletion
      }
      param.pageNo = this.ipagination.currentPage
      param.pageSize = this.ipagination.pageSize
      return param
    },
    async loadTableData() {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      let params = this.getQueryParams()// 查询条件
      this.loading = true
      let res = await getAction(this.url.list, params)
      if (res.success && res.result.last && res.result.content.length === 0) { // 当最后一页无数据时，重新请求
        this.ipagination.currentPage = 1
        params = this.getQueryParams()// 查询条件
        res = await getAction(this.url.list, params)
      }
      this.columns = [
        { type: 'seq', width: 60, field: 'seq' }
      ]
      const data = res.result.content[0]
      Object.keys(data).forEach(key => {
        this.columns.push({
          title: key,
          field: key,
          width: 100
        })
      })
      this.loading = false
      return res
    }
  },
  async mounted() {
    // 加提示
    this.$refs.cmRef.codemirror.on('inputRead', (cm) => {
      cm.showHint()
    })

    // 获取选中的内容
    this.$refs.cmRef.codemirror.on('cursorActivity', (cm) => {
      this.currentSeletion = cm.getSelection()
    })
  }
}
</script>

<style scoped lang="less">
.button-warp{
  margin-bottom: 8px;
  button{
    margin-right: 2px;
  }
}
</style>
